解决ios H5支付宝支付不能跳回App的问题 |
您所在的位置：网站首页 › ios 权限设置后直接返回到 app › 解决ios H5支付宝支付不能跳回App的问题 |
解决ios H5支付宝支付不能跳回App的问题
|
解决ios H5支付宝支付不能跳回App的问题
这种做法只适合 APP -> 浏览器 -> 支付宝的支付形式 本人项目为uniapp做的APP项目 官方文档的原话： 在 IOS 系统中，唤起支付宝 App 支付完成后，不会自动回到浏览器或商户 App。用户可手工切回到浏览器或商户 App；支付宝 H5 收银台会自动跳转回商户 return_url 指定的页面。 官方文档这么说可能是不让你修改里面的fromAppUrlScheme值把，目前原因未知 1.当我们在webview 支付宝支付的时候，页面会加载支付宝返回的页面链接（如果浏览器访问的话，会直接跳到支付宝，在webview的话，就不会跳过去，需要点击 继续付款 才会跳转，所以我们要对这里的 继续付款 的按钮进行处理），如图： 
2.H5支付，这里就不贴代码了，其实就是前端发起请求，后端返回一个 form 表单，将他 v-html 渲染在页面上，在执行 setTimeout(()=>{document.forms[0].submit();},300) ，就可以了，具体参考网上代码。
3.首页我们要了解为什么会跳到支付宝APP，我们首先要了解下 `URL Scheme` ，每个APP都有单独`URL Scheme` ，除非恶意软件，它是能在浏览器输入访问的话，就会跳到对应的APP的一个东西，这里推荐一个网站，能查对应APP的`URL Scheme`:[https://sharecuts.cn/app/333206289](https://sharecuts.cn/app/333206289)
当我们点击继续付款的话，会出现(可以拿H5页面去测试，在log报错会出现这一条): alipay://alipayclient/?xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx解码为(网站：http://tool.chinaz.com/tools/urlencode.aspx)： alipay://alipayclient/? { "requestType":"SafePay", "fromAppUrlScheme":"alipays", "dataString":"h5_route_token=\"xxxxxxxxxxxxxxxxx\"&is_h5_route=\"true\"&h5_route_senior=\"true\"" }我们看到了 alipay:这个东西就是跳转到支付宝APP的东西，点击的话他在 IOS 上是 点击 -> 链接到Safari-> 跳转到支付宝，这里我们要对这段链接进行拦截并修改里面的fromAppUrlScheme的值，改成为你 公司的APP 的URL Scheme，这里我们看 fromAppUrlScheme 的值为 alipays所以，支付成功后还是留在 支付宝 4.理解1、2两点之后我们在webview进行拦截，直接贴代码： 原理：这段代码是，拦截我们点击按钮跳转的链接，并修改里面的fromAppUrlScheme的值，实现跳转 onReady() // #ifdef APP-PLUS if (uni.getSystemInfoSync().platform == 'ios') { const currentWebview = this.$mp.page.$getAppWebview(); var wv = currentWebview.children()[0]; //拦截支付宝点击支付的按钮跳转，并修改里面的 fromAppUrlScheme 值 wv.overrideUrlLoading({mode: 'reject',match: '.*alipay\:\/\/.*'},(e)=>{ console.log(e.url); let newUrl = e.url.replace(/alipays/,'www.xxx.com://') setTimeout(() => { console.log(newUrl); plus.runtime.openURL(newUrl, function(res) { console.log('跳转支付宝成功:'+ res); }); },500); }); } // #endif }注：我们使用 plus.runtime.openURL 会报一个错，会出现 报错code:-3,msg:此功能不支持，这是因为iOS平台需要通过设置appInf的action属性（Scheme）进行查询，在iOS9以后需要添加白名单才可查询。 设置 在manifest.json文件的"plus"->“distribute”->"ios"下添加 urltypes 和 urlschemewhitelist 节点数据如下： "ios" : { "urltypes" : [ { "urlidentifier" : "com.xxx.www", "urlschemes" : [ "www.xxx.com" ] //名字随便取，不过要跟上面的拦截修改一致，拦截的话后面记得加上 ://，相关配置文章看我最后发的链接 } ], "urlschemewhitelist" : [ "alipay" ], }注：保存后提交App云端打包后才能生效 或者自定义基座运行 iOS平台设置UrlSchemes：https://ask.dcloud.net.cn/article/64 iOS平台设置应用访问白名单：https://ask.dcloud.net.cn/article/434 |
【本文地址】
今日新闻 |
推荐新闻 |